<template>
    <div class="siteWrapper">
        <div :class="['siteLeftWrapper']">
            <a :href="site.homePage" class="siteTitleWrapper">
                <img src="https://www.orzzone.com/projects/cdn/favicon.ico" alt="" class="siteTitleLogo" />
                <h1 class="siteTitleText">{{ site.title }}</h1>
            </a>
            <div class="siteMenuWrapper">
                <el-menu :unique-opened="true" :default-active="$route.path" class="siteMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @open="handleOpen" @close="handleClose">
                    <el-submenu index="/runtime">
                        <template #title>
                            <i class="el-icon-location"></i>
                            <span>模块1</span>
                        </template>
                        <el-menu-item index="/module1/page1" @click="goPage('/module1/page1')">模块1页面1</el-menu-item>
                    </el-submenu>

                    <el-submenu index="/log">
                        <template #title>
                            <i class="el-icon-menu"></i>
                            <span>模块2</span>
                        </template>
                        <el-menu-item index="/module2/page1" @click="goPage('/module2/page1')">模块2页面1</el-menu-item>
                        <el-menu-item index="/module2/page2" @click="goPage('/module2/page2')">模块2页面2</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="btnToggleMenuWrapper">
                <i class="el-icon-d-arrow-left btnToggleSiteMenu"></i>
            </div>
        </div>
        <div class="siteRightWrapper">
            <div class="siteContentWrapper">
                <router-view v-slot="{ Component }">
                    <Suspense>
                        <component :is="Component" />
                    </Suspense>
                </router-view>
            </div>
        </div>
    </div>
</template>

<script>
import { goPage } from './scripts/utils';

export default {
    name: 'App',
    components: {},
    data() {
        return {};
    },
    computed: {
        site() {
            return this.$store.state.site;
        },
    },
    methods: {
        goPage(pathname) {
            if (this.$route.path === pathname) {
                return;
            }
            goPage({ pathname, query: {}, replace: false });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath); // eslint-disable-line no-console
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath); // eslint-disable-line no-console
        },
    },
};
</script>

<style lang="scss">
@import './styles/_utils.scss';
@import './styles/reset.scss';
.siteWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
}
.siteLeftWrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    width: $siteSidebarWidth !important;
    height: 100%;
    background-color: rgb(84, 92, 100);
    overflow-x: hidden;
    overflow-y: auto;
    .siteTitleWrapper {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-left: -4px;
        height: $siteHeaderHeight;
        line-height: $siteHeaderHeight;
        user-select: none;
        cursor: pointer;
        box-sizing: border-box;
        .siteTitleLogo {
            display: inline-block;
            vertical-align: middle;
            height: 32px;
            width: auto;
            border-radius: 50%;
        }
        .siteTitleText {
            display: inline-block;
            vertical-align: middle;
            height: 32px;
            line-height: 32px;
            margin-left: 12px;
            font-weight: 600;
            font-size: 18px;
            color: #fff;
        }
    }
    .siteMenuWrapper {
        display: block;
        flex: 1 1 0;
        overflow: hidden auto;
        width: 100%;
        .siteMenu {
            width: $siteSidebarWidth;
        }
    }
    .btnToggleMenuWrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 48px;
        padding: 0 20px;
        box-sizing: border-box;
        .btnToggleSiteMenu {
            cursor: pointer;
            user-select: none;
            font-size: 18px;
            color: #fff;
        }
    }
}
.siteRightWrapper {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    height: 100%;
    background-color: #f0f2f5;
    overflow-x: hidden;
    overflow-y: auto;
    .siteContentWrapper {
        padding: 16px;
    }
}
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}
.el-aside {
    color: #333;
}
</style>
